import React, { Component } from 'react';
import { StyleSheet, ScrollView } from 'react-native';
import { View, Text, ProgressBar, Colors, Spacings } from 'react-native-ui-lib'; //eslint-disable-line
import { TestCase, TestSuite } from '@rnoh/testerino';

export default class ProgressBarScreen extends Component {

  get customElement() {
    return (
      <View
        style={{
          backgroundColor: Colors.green30,
          borderWidth: 0.5
        }}
      />
    );
  }

  render() {

    return (
      <TestSuite name="ProgressBar">

        <TestCase itShould="Custom Element:backgroundColor: Colors.green30, borderWidth: 0.5">
          <View padding-20>
            <ProgressBar
              progress={30}
              style={styles.progressBar}
              customElement={this.customElement}
            />
          </View>
        </TestCase>

        <TestCase itShould="FullWidth">
          <View padding-20>
            <Text $textDefault text70 style={styles.text}>
              FullWidth:true
            </Text>
            <ProgressBar
              progress={50}
              fullWidth={true}
              style={styles.fullWidthProgressBar}
            />
          </View>

          <View padding-20>
            <Text $textDefault text70 style={styles.text}>
              FullWidth:false
            </Text>
            <ProgressBar
              progress={50}
              fullWidth={false}
              style={styles.fullWidthProgressBar}
            />
          </View>
        </TestCase>

        <TestCase itShould="progresses">
          <View padding-20>
            <Text $textDefault text70 style={styles.text}>
              progresses:30
            </Text>
            <ProgressBar
              progress={30}
              style={styles.progressBar}
            />
          </View>
          <View padding-20>
            <Text $textDefault text70 style={styles.text}>
              progresses:80
            </Text>
            <ProgressBar
              progress={80}
              style={styles.progressBar}
            />
          </View>
        </TestCase>

        <TestCase itShould="progressColor: Colors.purple70">
          <View padding-20>
            <ProgressBar
              progress={30}
              style={styles.progressBar}
              progressColor={Colors.purple70}
            />
          </View>
        </TestCase>

        <TestCase itShould="Styled:backgroundColor: Colors.purple40, height: 30,">
          <View padding-20>
            <ProgressBar
              progress={50}
              style={[styles.progressBar, styles.styledProgressBar]}
              progressColor={Colors.purple70}
            />
          </View>
        </TestCase>

      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    paddingTop: 20,
    paddingBottom: 15,
    paddingLeft: 20,
  },
  progressBar: {
    marginBottom: 10,
    marginHorizontal: Spacings.s4,
  },
  styledProgressBar: {
    backgroundColor: Colors.purple40,
    height: 30,
  },
  fullWidthProgressBar: {
    width: 200,
  },
});
